<template>
	<van-nav-bar
    :fixed="isFixed"
    :border="border"
    :z-index="zIndex"
    :style="{background: bgStyle}"
	>
        <template #left v-if="showLeft">
		    <van-icon size="22px" :color="textColor" name="arrow-left" @click="back" />
        </template>
        <template #title>
            <div class="title text-cut" :style="{'color': textColor}">{{title}}</div>
        </template>
        <template #right v-if="showRight">
            <slot name="rightText">{{rightText}}</slot>
            <div @click="rightClick" class="right-img">
                <img :class="rotate ? 'rotate' : ''" :src="rightImg" alt="" srcset="">
            </div>
        </template>
	</van-nav-bar>
</template>

<script>
import { NavBar } from 'vant'
export default {
    // --------------------------------------------------
    // 默认配置： 显示返回箭头 显示关闭按钮 显示刷新按钮
    // 字体颜色#222 不显示下边框 z-index: 99
    // 背景颜色#fff 固定在顶部（高度46px）
    // --------------------------------------------------
    props: {
        title: {
            type: String,
            default: ''
        },
        showLeft: {
            type: Boolean,
            default: true
        },
        showRight: {
            type: Boolean,
            default: true
        },
        bgStyle: {
            type: String,
            default: '#ffffff'
        },
        textColor: {
            type: String,
            default: '#ffffff'
        },
        border: {
            type: Boolean,
            default: false
        },
        zIndex: {
            type: Number,
            default: 99
        },
        isFixed: {
            type: Boolean,
            default: true
        },
        iconName: {
            type: String,
            default: 'replay'
        },
        rightImg: {
            type: String,
            default: ''
        },
        rightText: {
            type: String,
            default: ''
        },
        rotate: {
            type: Boolean,
            default: false
        },
        rightContent: {
            type: Boolean,
            default: false
        },
    },
    data () {
        return {
            from: ''
        }
    },
    components: {
        [NavBar.name]: NavBar
    },
    created () {
        this.from = this.$common.getUrlName('from')
    },
    methods: {
        back () {
            this.$emit('leftClick')
        },
        rightClick () {
            this.$emit('rightClick')
        }
        /*
        rightClick () {
            this.$emit('rightClickFn')
            if (this.iconName == 'share') {
            } else {
                window.location.reload()
            }
        } */
    },
    
}
</script>

<style lang="less" scoped>
.title{
    font-size:16px;
    color: #222222;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
}
.right-img{
    width: 18px;
    height: 18px;
    img{
        width: 100%;
        height: 100%;
    }
}

</style>